<html>
<head>
<meta charset="UTF-8">
<link href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="static/assets/global/css/components.css" rel="stylesheet" type="text/css"/>
<link href="static/assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
<script src="static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>

</head>

<body class="login">

	<div class="content">
	<h3 class="form-title">商品列表页</h3>
	</div>	


</body>


<script>
	//定义全局商品数组信息
	var g_itemList = [];
	jQuery(document).ready(function(){
			$.ajax({
				type:"GET",
				url:"http://localhost:8090/item/list",
				xhrFields:{withCredentials:true},
				success:function(data){
					if(data.status == "success"){
						g_itemList = data.data;
						reloadDom();
					}else{
						alert("获取商品信息失败，原因为"+data.data.errMsg);
					}
				},
				error:function(data){
					alert("获取商品信息失败失败，原因为"+data.responseText);
				}
			});
	
		});


function reloadDom(){
	for(var i = 0; i < g_itemList.length; i++){
		var itemVO = g_itemList[i];
			var dom = "<div data-id='"+itemVO.id+"' id='itemDetail"+itemVO.id+"'><div class='form-group'><div><img style='width:200px;height:auto' src='"+itemVO.imgUrl+"'/></div></div><div class='form-group'><div><label class='control-label'>"+itemVO.title+"</label></div></div><div class='form-group'><label class='control-label'>价格</label><div><label class='control-label'>"+itemVO.price+"</label></div></div><div class='form-group'><label class='control-label'>销量</label><div><label class='control-label'>"+itemVO.sales+"</label></div></div></div>";




		$(".content").append($(dom));

		$("#itemDetail"+itemVO.id).on("click",function(e){
			window.location.href="getitem.html?id="+$(this).data("id");
		});
	}

}


</script>




</html>